import React from 'react'
import {LockOutlined, UserOutlined}  from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
// 导入封装封装好的接口
import { adminLoginFn, IAdminParams } from '../../api/user';
// 导入RTK相关基础操作信息
import { useAppDistpatch } from '../../store/hooks';
import { changeAdminName,changeCheckedkeys,changeLoginState,changeRole,changeToken } from '../../store/modules/user';
import { redirect, useLocation, useNavigate } from 'react-router-dom';
// 登录态的判断
type IndexProps = {}

export const Index = (props:IndexProps)=>{

    // 拿到redux中的方法
    const dispatch = useAppDistpatch()
    const navigate = useNavigate()
    // 拿到登录之后的参数
    const {search}  = useLocation()
    const redirectUrl = search.split('?r=')[1]

    // 点击登录相关逻辑
    const onFinish = (values:IAdminParams)=>{
        console.log( values)
        adminLoginFn(values).then(res=>{
            console.log(res.data)
            switch(res.data.code){
                case '10005':
                    message.error("不存在该账号")
                    break
                case '10003':
                    message.error('密码错误')
                    break
                default:
                    message.success("登录成功")
                    // 在RTK中存储信息到本地进行状态管理
                    const result  = res.data.data
                    dispatch(changeLoginState(true))
                    dispatch(changeAdminName(result.adminname))
                    dispatch(changeToken(result.token))
                    dispatch(changeRole(result.role))
                    dispatch(changeCheckedkeys(result.checkedkeys)) 
                    // 这里需要根据用户登录之前的位置进行判断跳转回之前的位置，
                    // 应该跳转到首页
                    // navigate('/',{replace:true})
                    redirectUrl?navigate(redirectUrl,{replace:true}):navigate('/',{replace:true})
                    break
            }
        })
    }
    return (
        <div id='components-form-demo-normal-login'>
            <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            >
                <h1>嗨购管理系统</h1>
                {/* 把usernme改成adminname */}
                <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入管理员账户!' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账户" allowClear/>
                </Form.Item>
                <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="密码"
                    allowClear
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
